<style>
    .layui-form-checkbox{
        margin-bottom:20px;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
              <li class="layui-this">基本信息</li>
              <li >营地介绍</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">景点名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="store_name" class="layui-input" lay-verify="required" placeholder="请输入景点名称" value="">
                    </div>
                </div>
             
                <div class="layui-form-item">
                    <label class="layui-form-label required">景点图</label>
                    <div class="layui-input-block layuimini-upload">
                        <input name="image" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传景点图" value="">
                        <div class="layuimini-upload-btn">
                            <span><a class="layui-btn layui-btn-sm" data-upload="image" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                            <span><a class="layui-btn layui-btn-normal layui-btn-sm" id="select_images" data-upload-select="image" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所在地</label>
                    <div class="layui-input-block">
                        <input type="text" id="demo1" class="layui-input" readonly="readonly" name="address_ids">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="adress_detail" class="layui-input" lay-verify="required" placeholder="请输入详细地址" value="" id="store_address_detail">
                    </div>
                </div>
                <div class="layui-form-item" >
                    <label class="layui-form-label ">经度</label>
                    <div class="layui-input-block">
                        <input type="text" name="longitude" class="layui-input"   placeholder="请输入经度" value="" id="lon"   lay-filter="lon" >
                        <tip>点击地图点选</tip>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label  ">纬度</label>
                    <div class="layui-input-block">
                        <input type="text" name="latitude" class="layui-input"   placeholder="请输入经度" value=""  id="lat"   lay-filter="lat" >
                        <!-- <tip>点击地图点选</tip> -->
                    </div>
                </div>
           
                <div class="layui-form-item">
                    <label class="layui-form-label">营业时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="business_hours"  class="layui-input"  placeholder="请输入营业时间" value="">
                    </div>
                </div>
           
              

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" class="layui-input" lay-verify="required" placeholder="请输入排序" value="0">
                    </div>
                </div>
           
                 <div class="layui-form-item">
                    <label class="layui-form-label">容纳人数</label>
                    <div class="layui-input-block">
                        <input type="text" name="people_number"  class="layui-input"  placeholder="请输入容纳人数" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商家电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone"  class="layui-input"  placeholder="请输入商家电话" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">面积</label>
                    <div class="layui-input-block">
                        <input type="text" name="measure"  class="layui-input"  placeholder="请输入面积" value="">
                    </div>
                </div>
                 <div class="layui-form-item">
                    <label class="layui-form-label">设施服务停车</label>
                    <div class="layui-input-block">
                        <input type="text" name="parking"  class="layui-input"  placeholder="请输入设施服务停车" value="免费停车">
                    </div>
                </div>
                 
              </div>
              <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <!-- <label class="layui-form-label">介绍</label>
                            <div class="layui-input-block">
                                <textarea id="describe" rows="60" class="layui-textarea editor" placeholder="请输入介绍" name="bbbb"></textarea>
                                <input type="hidden" name="introduce" class="describe">
                            </div> -->
                             <div class="layui-form-item">
                    <label class="layui-form-label required">介绍</label>
                    <div class="layui-input-block layuimini-upload">
                        <input name="introduce" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传介绍">
                        <div class="layuimini-upload-btn">
                            <span><a class="layui-btn layui-btn-sm" data-upload="introduce" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                            <span><a class="layui-btn layui-btn-normal layui-btn-sm" id="select_introduce" data-upload-select="introduce" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                        </div>
                    </div>
                </div>
                        </div>
                         <div class="layui-form-item">
                            <label class="layui-form-label">营地特色</label>
                            <div class="layui-input-block flex-row tags" id="tags" style="width: 600px;">
                                <input type="text" name="" class="layui-input" placeholder="多个标签空格生成" id="inputTags">
                            </div>
                            <input type="hidden" name="characteristic" value="" id="content"  placeholder="请输入营地特色">
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">付款方式</label>
                            <div class="layui-input-block flex-row tags" id="tags" style="width: 600px;">
                                <input type="text" name="" class="layui-input" placeholder="多个标签空格生成" id="inputTags1">
                            </div>
                            <input type="hidden" name="payment_method" value="" id="content"  placeholder="请输入付款方式">
                        </div>
                         <div class="layui-form-item text-center">
                         <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm submit" data-url="add">提交</button>
                         <!-- <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button> -->
                </div>
              </div>
              </div>
             
            </div>
          </div>
    </form>
</div>
<div  id="tMap" class="layui-hide" style="padding: 10px;">
    <div  class="layui-form layuimini-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="search_key" id="search_key" class="layui-input"  placeholder="请输入地名" >
            </div>
            <button  class="layui-btn layui-btn-normal layui-btn-sm searchKey" >查询</button>
        </div>
    </div>
    <div id="maplocation" style="width:780px;height:400px;"></div>
</div>
<style>
   body .layui-ext-yourskin  .layui-layer-btn0{
        border: 1px solid #dedede;
        background-color:#fff;
        color: #333;
    }
    body .layui-ext-yourskin  .layui-layer-btn1{
        background-color:#1E9FFF;
        border-color:#1E9FFF;
        color: #fff;
    }
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=O6YBZ-XFTH4-HHSUR-DV4AI-5T4D6-BMFUU&libraries=drawing,geometry,place,convertor,visualization"></script>
<script type="text/javascript">

    layui.config({
         base: '/static/plugs/layui-v2.5.6/lay/modules/',
     }).use(['inputTags'],function(){
         var inputTags = layui.inputTags;
         inputTags.render({
           elem:'#inputTags',//定义输入框input对象
           content: [],//默认标签
           aldaBtn: false,//是否开启获取所有数据的按钮
           openFlatContent:true,
           done: function(value){ //回车后的回调
           }
         });  
         inputTags.render({
           elem:'#inputTags1',//定义输入框input对象
           content: [],//默认标签
           aldaBtn: false,//是否开启获取所有数据的按钮
           openFlatContent:true,
           done: function(value){ //回车后的回调
           }
         }); 
       })
 </script>
<script type="text/javascript"> 
    var layer = layui.layer;
     $=layui.jquery;
     $(document).on('click','#lon',function(){
         if(!$("#demo1").val()){
             layer.msg('请选择所在地', { icon: 5, anim: 6 });
             return false;
         }
         var  markers = [];
        $("#tMap").removeClass('layui-hide');
       layer.open({
                         type:1,
                         area:["800px","600px"],
                         title:"地图标识",
                         btn: ['取消','确定'],
                         skin: 'layui-ext-yourskin',
                         content:$('#tMap'),
                         success:function(){
                            let map = new qq.maps.Map(document.getElementById("maplocation"), {
                                center: new qq.maps.LatLng(40.820004,111.718132),      // 地图的中心地理坐标。
                                zoom:13,                                                 // 地图的中心地理坐标。
                            });
                            
                            var latlngBounds = new qq.maps.LatLngBounds();
                            searchService = new qq.maps.SearchService({
                             
                                complete:function(results){
                                        console.log(results)
                                        var pois = results.detail.pois;
                                        var infoWin = new qq.maps.InfoWindow({
                                            map: map
                                        });
                                    var latlngBounds = new qq.maps.LatLngBounds();
                                    for (var i = 0, l = pois.length; i < l; i++) {
                                        var poi = pois[i];
                                        //扩展边界范围，用来包含搜索到的Poi点
                                        latlngBounds.extend(poi.latLng);
                        
                                        (function(n) {
                                            console.log(111)
                                            var marker = new qq.maps.Marker({
                                                map: map
                                            });
                                            marker.setPosition(pois[n].latLng);
                        
                                            marker.setTitle(i + 1);
                                            markers.push(marker);
                        
                        
                                            qq.maps.event.addListener(marker, 'click', function() {
                                                let latX = pois[n].latLng.getLat().toFixed(6);
                                                let lngY = pois[n].latLng.getLng().toFixed(6);
                                                $('#lon').val(latX);
                                                $('#lat').val(lngY);
                                                infoWin.open();
                                                infoWin.setContent('<div style="width:280px;height:100px;">' + '当前经纬度：' +
                                                    pois[n].latLng + '，名称：' + pois[n].name + '，当前位置：' + pois[n].address +'</div>');
                                                infoWin.setPosition(pois[n].latLng);
                                            });
                                        })(i);
                                    }
                                    //调整地图视野
                                    map.fitBounds(latlngBounds);
                                }
                            });
                            qq.maps.event.addListener(map, 'click', function(event) {
                                var marker=new qq.maps.Marker({
                                    position:event.latLng,
                                    map:map,
                                    draggable: true,
                                });
                                var info = new qq.maps.InfoWindow({
                                    map: map
                                });
                                var point = event.latLng;
                                let latX = point.getLat().toFixed(6);
                                let lngY = point.getLng().toFixed(6);
                                $('#lon').val(latX);
                                $('#lat').val(lngY);
                                
                                qq.maps.event.addListener(map, 'click', function(event) {
                                    
                                    marker.setMap(null);
                                });
                              
                                qq.maps.event.addListener(marker, 'dragging', function(event) {
                                   
                                    var latLng = event.latLng;
                                    let lat = latLng.getLat().toFixed(6);
                                    let lng = latLng.getLng().toFixed(6);
                                    $('#lon').val(lng);
                                    $('#lat').val(lat);
                                });
                            });
                      
                         } ,
                         yes: function(index, layero){
                             
                            $("#tMap").addClass('layui-hide');
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                        },
                        btn2: function(index, layero){
                    
                            $("#tMap").addClass('layui-hide');
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                        },
                         cancel: function(index, layero){ 
                            //if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                            document.getElementById("tMap").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间 
                                layer.close(index)
                            // }
                            return false; 
                            }    //这里content是一个普通的String
                            });
});

$(document).on('click','.searchKey',function(){
    var search_key=$("#search_key").val();
    var city=$(".el-input__inner").val().replace(/\ +/g,"").replace(/\//g,'');

     searchService.setLocation(city);
     searchService.search(search_key);
 
})


</script>
<!-- <script src="__STATIC__/admin/js/layui.js"></script> -->
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/lay_cascader/cascader/cascader.css"/>
<script src="__STATIC__/plugs/lay_cascader/cascader/cascader.js"></script>
<script type="text/javascript"> 
      $.ajax({
            url: "/admin/management.store/getarea",
            type: 'get',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json",
            timeout: 60000,
            success: function (res) {
       
                layui.use('layCascader', function () {
                    var layCascader = layui.layCascader;
                    layCascader({
                    elem: '#demo1',
                    clearable:true,
                  
                    options: res.data,
                    
                    
                    });
                });
                
            },
            error: function (xhr, textstatus, thrown) {
              
                return false;
            }
    });


</script>   